/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */
@import '@/styles/common.less';

* {
  box-sizing: border-box;
}


body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  // color: #fff;
  height: 100vh;
  background: @page-background-color;
}

.content {
  background: @page-background-color;
  max-height: calc(100vh - 64px);
}

/**
子路由容器样式
**/
.child_content {
  background: @page-background-color;
  overflow-y: auto;
}

.volcano-config-website_root {
  .child_content {
    background: @page-background-color;
    overflow-y: auto;
    max-height: calc(100vh - 65px);
  }
}

/** 页面布局样式**/
.page_header {
  padding: 16px 0 16px 32px;
  background: @page-container-color;
  box-shadow: inset 0px -1px 0px rgba(229, 229, 229, 1);

  // .@{container-prefix}-breadcrumb {
  //   padding: 0 !important;
  // }
}

.page_header_noPadding {
  padding: 16px 0 16px 0px;
  background: @page-container-color;
  box-shadow: inset 0px -1px 0px rgba(229, 229, 229, 1);
}

.page_content {
  margin: 20px 32px;
  background: @page-container-color;
}

.common_icon {
  width: 20px;
  height: 20px;
}

.common_antd_icon {
  svg {
    width: 20px;
    height: 20px;
  }
}

//分页调整
.@{container-prefix}-page {
  padding: 20px 0px 17px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin: 0 !important;

  .@{container-prefix}-pagination-item,
  .@{container-prefix}-pagination-next,
  .@{container-prefix}-pagination-prev,
  .@{container-prefix}-select-selector {
    border-radius: 6px;
    background: #fff;
    border: 1px solid @page-border-color;
  }

  .@{container-prefix}-pagination-options-quick-jumper {
    input {
      border-radius: 6px;
      background: #fff;
      border: 1px solid @page-border-color;
    }

    input:hover {
      border: 1px solid @border-focus-color !important;
    }
  }

  .@{container-prefix}-pagination-item:hover {
    border: 1px solid @border-focus-color;
    background-color: #fff !important;
  }

  .@{container-prefix}-select:hover {
    .@{container-prefix}-select-selector {
      border: 1px solid @border-focus-color !important;
      background-color: #fff !important;
    }
  }

  .@{container-prefix}-pagination-next:hover,
  .@{container-prefix}-pagination-prev:hover {
    border: 1px solid @border-focus-color;

    button {
      background-color: #fff !important;
    }
  }

  .@{container-prefix}-pagination-item-active {
    background: @button-normal-color !important;
    border: 1px solid @button-normal-color !important;

    a {
      color: #fff;
    }
  }
}

// 取消按钮
.cancel_btn {
  height: 32px;
  width: 96px;
  border: 1px solid @button-disabled-color;
  color: @title-color;
  border-radius: 6px !important;
}

.cancel_btn:hover {
  border: 1px solid @button-hover-color;
  color: @button-hover-color;
}

.cancel_btn:focus {
  border: 1px solid @button-click-color;
  color: @button-click-color;
}

//面包屑
.breadCrumb_self {
  width: auto;
}

.create_bread {
  padding-bottom: 16px;
  box-shadow: inset 0px -1px 0px rgba(229, 229, 229, 1);
}

.unNormalColor {
  color: #E7434A;
}

.normalColor {
  color: #09AA71;
}

// // 统一修改modal的边角
// .@{container-prefix}-colocation-website-modal-content{
//   border-radius: 4px !important;
//   .@{container-prefix}-colocation-website-modal-footer{
//     margin-top: 0px;
//   }
// }

//输入框颜色
.@{container-prefix}-input,
.@{container-prefix}-input-search-button {
  border-color: @border-normal-color;
}

.@{container-prefix}-input:focus,
.@{container-prefix}-input:hover,
.@{container-prefix}-input-affix-wrapper:hover {
  border-color: @border-focus-color !important;
}

.@{container-prefix}-input-search-button:hover,
.@{container-prefix}-input-search-button:focus {
  border-color: @border-focus-color !important;
}

.@{container-prefix}-input-search-button:hover {
  svg {
    fill: @border-focus-color !important;
  }
}

//修改全局滚动条
*::-webkit-scrollbar {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 6px;
  border-radius: 6px;
  position: absolute;
  width: 8px;
  top: 0px;
  height: 8px;
  bottom: 0px;
  right: 0px;
  visibility: hidden;
}

*::-webkit-scrollbar-track {
  background-color: #fff;
}

*::-webkit-scrollbar-thumb {
  position: absolute;
  border-radius: 99px !important;
  cursor: pointer;
  user-select: none;
  height: 20px;
  background: rgba(145, 145, 145, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

*::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(145, 145, 145, 0.4);
}

.large-icon{
  svg{
    width: 16px;
    height: 16px;
  }
}

// 移除的弹窗样式
.modal_flex_delete {
  .@{container-prefix}-modal-title {
    line-height: 22px;
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .modal_delete_content {
    display: flex;
    align-items: center;
    flex-direction: row;
    min-height: 80px;
  }

  .warn_icon svg {
    height: 48px;
    width: 48px;
    color: #f5595c;
  }

  .word_tograry {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 0;

    p {
      line-height: 24px;
      font-size: 14px;
      color: #666666;
      margin-bottom: 11px;
    }

    .multi_checkbox {
      text-align: left;
      color: #89939b;
    }
  }
}

.back_cancel_btn {
  height: 32px;
  width: 96px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccccccff;
  margin-right: 10px;
}

.back_config_btn {
  height: 32px;
  width: 96px;
  font-size: 14px;
  border-radius: 6px;
  background: #356ac4ff;
  color: #fffffF;
  border: 1px solid #356ac4ff;
}

.back_config_btn:hover {
  background: @button-hover-color !important;
  border: 1px solid #4B8BEA !important;
  color: #ffffff !important;
}

.@{container-prefix}-tabs>.@{container-prefix}-tabs-nav .@{container-prefix}-tabs-nav-wrap {
  padding-left: 32px;
}

.@{container-prefix}-tabs-top>.@{container-prefix}-tabs-nav {
  margin: 0px !important;
}

.@{container-prefix}-tabs .@{container-prefix}-tabs-content-holder {
  background-color: #f7f7f7 !important;
}

.@{container-prefix}-btn {
  color: #346ac4;
}

//默认按钮
.primary_btn {
  height: 32px;
  width: 96px;
  background-color: @button-normal-color;
  color: #fff;
  border-radius: 6px;
}

.primary_btn:hover {
  background-color: @button-hover-color !important;
  color: #fff !important;
  box-shadow: none !important;
}

.primary_btn:focus {
  background-color: @button-click-color !important;
  border-color: @button-click-color !important;
  box-shadow: none !important;
}

.detail_card {
  padding: 32px 64px 32px 32px;
  background-color: #fff;

  h3 {
    color: @title-color;
    margin: 0 0 20px 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
  }

  .detail_info_box {
    font-size: 14px;
    padding: 0 0 0 32px;

    .annotation {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 16px;

      .ann_title {
        display: flex;
        flex-direction: row;
        align-items: center;

        p {
          margin: 0;
          color: #89939b;
          margin-right: 16px;
        }
      }
    }

    .base_info_list {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;

      .flex_item_opt {
        display: flex;
        min-width: 50%;
        flex-direction: column;
        align-items: flex-start;

        .base_description {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          font-size: 14px;
          line-height: 22px;
          // margin-bottom: 16px;

          .base_key {
            color: #89939b;
            width: 120px;
            word-break: keep-all;
          }

          .base_value {
            margin-left: 24px;
            color: @title-color;
            display: flex;
            word-break: break-all;
            align-items: center;
          }

          .status_pod {
            margin-left: 24px;
            display: flex;
            flex-direction: row;
            align-items: center;

            p {
              margin: 0;
              color: @title-color;
            }

            .special {
              color: #333333;
            }

            p:nth-child(2) {
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}
.yaml_space_box {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 450px;
  margin: 0 32px 32px 32px;
}

.key_value {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  word-break: break-all;
  align-items: center;

  .label_item {
    margin-top: 12px;
    margin-right: 8px;
    display: flex;

    .label_tag_key {
      padding: 3px 12px 2px 12px;
      border-radius: 6px 0 0 6px;
    }

    .label_tag_value {
      min-height: 27px;
      white-space: pre-wrap;
      padding: 3px 12px 2px 12px;
      border-radius: 0px 6px 6px 0;
    }

    .@{container-prefix}-tag {
      margin-inline-end: 0px !important;
      color: @title-color !important;
      font-size: 14px;
    }
  }

  .label_item:last-child {
    margin-right: 0px;
  }
}

//带图标按钮
.icon_btn {
  display: flex;
  padding-left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/**icon 普通**/
.primary_icon {
  color: @icon-normal_color;
  cursor: pointer;
}

.primary_icon:hover {
  color: @icon-hover-color;
}

.@{container-prefix}-radio-button-wrapper-checked:not(.volcano-config-website-radio-button-wrapper-disabled) {
  background-color: #346ac4
}

//分页调整
.page {
  padding: 20px 32px 32px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin: 0 !important;

  .@{container-prefix}-pagination-item,
  .@{container-prefix}-pagination-next,
  .@{container-prefix}-pagination-prev,
  .@{container-prefix}-select-selector {
    border-radius: 6px;
    background: #fff;
    border: 1px solid @page-border-color;
  }

  .@{container-prefix}-pagination-options-quick-jumper {
    input {
      border-radius: 6px;
      background: #fff;
      border: 1px solid @page-border-color;
    }

    input:hover {
      border: 1px solid @border-focus-color !important;
    }
  }

  .@{container-prefix}-pagination-item:hover {
    border: 1px solid @border-focus-color;
    background-color: #fff !important;
  }

  .@{container-prefix}-select:hover {
    .@{container-prefix}-select-selector {
      border: 1px solid @border-focus-color !important;
      background-color: #fff !important;
    }
  }

  .@{container-prefix}-pagination-next:hover,
  .@{container-prefix}-pagination-prev:hover {
    border: 1px solid @border-focus-color;

    button {
      background-color: #fff !important;
    }
  }

  .@{container-prefix}-pagination-item-active {
    background: @button-normal-color !important;
    border: 1px solid @button-normal-color !important;

    a {
      color: #fff;
    }
  }
}

// 表格与分页flex
.tab_table_flex {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: space-between;

  .table_padding {
    flex: auto;
    display: flex;
    flex-direction: column;
  }

  .@{container-prefix}-spin-nested-loading {
    display: flex;
    flex: auto;
    flex-direction: column;
  }

  .@{container-prefix}-spin-container {
    display: flex;
    height: inherit;
    flex: auto;
    flex-direction: column;
    justify-content: space-between;
  }
}


//面包屑颜色
.@{container-prefix}-breadcrumb {
  background-color: @page-container-color;
  padding: 16px 32px;

  a {
    color: #89939b !important;
  }
}

.volcano-table {
  background-color: #fff;
  padding: 32px;
  margin: 32px;
}

.question-icon-hover {
  &:hover {
    cursor: pointer;
    color: #4B8CEA;
    /* 悬停时的颜色 */
  }
}

.@{container-prefix}-switch.@{container-prefix}-switch-checked {
  background: #346ac4 !important;
}


  //容器边距
  .container_margin_box{
    margin: 20px 32px;
    background-color: @page-container-color;
  }
  .@{container-prefix}-table-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
  }